<template>
	<!-- 年度计划详情 -->
	<div class="tobeDone">
		<div class="title d-flex m-b20">
			<div class="left">
				年度 ： <span>{{ year }}年</span>
			</div>
			<div class="right m-l20">
				项目总数： <span>{{ projectNum }}</span>
			</div>
			<div class="right m-l20">
				计划投资总额（万元）：<span>{{ getAmount(planInvestAmount) }}万元</span>
			</div>
		</div>
		<el-tabs
			v-model="state.projectTypeId"
			class="demo-tabs"
			@tab-click="handleClick"
		>
			<el-tab-pane label="股权投资" name="1"></el-tab-pane>
			<el-tab-pane label="固定资产投资" name="2"></el-tab-pane>
		</el-tabs>
		<el-main
				v-loading="isLoading"
				element-loading-text="loading……"
		>
			<tableIndex
					:is-paging="false"
					:tableData="tableData"
					:tableHead="state.projectTypeId == 1 ? tableHead : tableHead2"
					:isIndex="true"
					:isSelection="true"
					:isRadio="false"
					:fields="state.projectTypeId == 1 ? state.fields : state.fields2"
					:height="500"
					ref="tableRef"
					:page="state.page"
					@searchList="searchList"
					@page-change="pageChange"
					@resetList="resetList"
			>
				<template #btns>
					<div class="d-flex">
						<div class="title d-flex m-b20">
							<div class="right m-l20">
								项目总数：
								<span>{{
										state.tabId == "0"
												? tableData[0]?.stockNum || 0
												: tableData[0]?.fixedNum || 0
									}}</span>
							</div>
							<div class="right m-l20">
								计划投资总额（万元）：<span>{{
									state.tabId == "0"
											? getAmount(tableData[0]?.stockAmount) || 0
											: getAmount(tableData[0]?.fixedAmount) || 0
								}}万元</span>
							</div>
						</div>
						<div style="margin-left: auto">
							<el-button size="small" plain class="button_edit" @click="onExportType(state.projectTypeId)"
							>导出</el-button
							>
						</div>
					</div>
				</template>
				<template #operate>
					<el-table-column label="操作" min-width="200" fixed="right">
						<template #default="{ row }">
							<el-button
									size="small"
									v-if="row.planStatus == -1"
									class="button_funtion"
									@click="viewHandel(row, 1)"
							>转为计划内</el-button
							>
							<el-button
									size="small"
									v-else
									class="button_view"
									type="primary"
									@click="viewHandel(row, -1)"
							>转为计划外</el-button
							>
						</template>
					</el-table-column>
				</template>
			</tableIndex>
		</el-main>
	</div>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import { exportExcelFile } from "@/common/utils/GlobalUtils";
import { annualApi } from "@/api/investment";
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { getURLhandler } from "@/common/utils/GlobalUtils.js";
import { ElTabs, ElMessage,ElMain } from "element-plus";
let route = useRoute();
const { planInvestAmount, projectNum, year } = getURLhandler(route.path);

const isLoading = ref(false);
const state = reactive({
	tabId: "0",
	planOutTotalAmount: 0,
	planInTotalAmount: 0,
	projectTypeId: "1",
	page: {
		page: 1,
		pageSize: 99999,
		total: 0,
	},
	fields: [
		{
			key: "keyword",
			label: "搜索",
			type: "input",
			placeholder: "投资对象关键字",
		},
	],
	fields2: [
		{
			key: "keyword",
			label: "搜索",
			type: "input",
			placeholder: "项目名称关键字",
		},
	],
});

const tableData = ref([]);
const tableHead = ref([
	{
		prop: "partnerName",
		label: "投资对象",
		minWidth: 80,
	},
	{
		prop: "note",
		label: "项目简介",
		minWidth: 80,
	},
	{
		prop: "registerCapital",
		label: "注册资本",
		minWidth: 100,
	},
	{
		prop: "investmentRatio",
		label: "投资比例",
		minWidth: 100,
	},
	{
		prop: "investAmount",
		label: "拟计划总投额",
		minWidth: 100,
	},
	{
		prop: "investPlanAmount",
		label: "年度计划投资额",
		minWidth: 100,
	},
	{
		prop: "executeAmount",
		label: "已执行金额",
		minWidth: 100,
	},
	{
		prop: "planStatus",
		label: "是否是计划内",
		formatter: (row) => {
			if(row.planStatus===-1){
				return '计划外'
			}
			if(row.planStatus===1){
				return '计划内'
			}
			return '-';
		},
		minWidth: 120,
	},
]);
const tableHead2 = ref([
	{
		prop: "projectName",
		label: "项目名称",
		minWidth: 80,
	},
	{
		prop: "note",
		label: "项目分析",
		minWidth: 80,
	},
	{
		prop: "investAmount",
		label: "计划总投额",
		minWidth: 100,
	},
	{
		prop: "investPlanAmount",
		label: "年度投资额",
		minWidth: 100,
	},
	{
		prop: "executeAmount",
		label: "已执行金额",
		minWidth: 100,
	},
	{
		prop: "planStatus",
		label: "是否是计划内",
		formatter: (row) => {
			return row.planStatus == 1 ? "计划内" : "计划外";
		},
		minWidth: 120,
	},
	{
		prop: "createTime",
		label: "创建时间",
		minWidth: 200,
	},
]);

const viewHandel = (row, type) => {
	annualApi.planStatus(row.projectId, type).then((res) => {
		if (res.code == 200) {
			ElMessage.success("操作成功");
			getPage(state.projectTypeId);
		}
	});
};

//搜索接口请求
const searchList = (e) => {
	getPage(e);
};
const resetList = (e) => {
	getPage();
};
const handleClick = (e) => {
	state.tabId = e.index;
	isLoading.value = true;
	setTimeout(()=>{
		getPage(parseInt(e.index) + 1,()=>{
			isLoading.value = false;
		});
	},800)
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};

const getPage = (projectTypeId,callback) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			year,
			projectTypeId: projectTypeId,
		},
	};
	annualApi.getManageDetail(obj).then((res) => {
		if (res.code === "200") {
			tableData.value = res.data.content;
			state.page.total = res.data.totalSize;
			if(callback)callback(res);
		}
	});
};

const tableRef = ref(null);
const onExport = () => {
	const obj = {
		projectTypeId: state.projectTypeId,
		keyword: tableRef.value.getSearchData().keyword || "",
		year,
	};
	annualApi.export(obj).then((res) => {
		exportExcelFile(res, "年度计划详情");
	});
};

const getAmount = (amount) => {
  if(amount!==undefined && amount!=='' && !isNaN(parseInt(amount))){
		return (amount/10000).toFixed(2);
	}
	return 0;
}

const onExportType = (type) => {
	const obj = {
		projectTypeId: state.projectTypeId,
		year,
	};
	switch (type) {
		case '1':
				annualApi.exportG(obj).then((res) => {
					exportExcelFile(res, "年度计划详情");
				});
			break;
		case '2':
			annualApi.exportGu(obj).then((res) => {
				exportExcelFile(res, "年度计划详情");
			});
			break;
	}
}

onMounted(() => {
	getPage(1);
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}
</style>
